<template>
    <div class="replay-box" v-loading="loading" element-loading-text="发送中" v-if="visible">
        <div class="replay-box-overlay" @click="handleClose"></div>
        <div class="replay-box-content">
            <div class="rb-hd">
                <h3 class="title">@群成员</h3>
            </div>
            <div class="rb-bd">
                <div class="selector">
                    <div class="contactor" v-if="user.id != '-1'" v-for="(user, index) in selectList" :key="index">
                        <div class="avatar">
                            <img class="img" :src="user.avatar" v-if="user.avatar != ''">
                            <img class="img" src="../../assets/person_icon.jpg" v-else>
                        </div>
                        <div class="opt" @click="handleDel(index)">
                            <i class="delete"></i>
                        </div>
                    </div>
                    <div class="input-box">
                        <icon class="s-icon" type="search" color="#9DA4B3" :size="24"></icon>
                        <input class="input" type="text" placeholder="搜索" v-model="search">
                    </div>
                </div>
                <div class="chooser" :class="{'choose2': selectList.length > 6}">
                    <el-scrollbar ref="replayBar" class="s-content" :native="false" :noresize="true" style="height: 100%">
                        <div class="contact-box" v-if="search.trim() == ''">
                            <div v-for="(item, index) in contactList" :key="index">
                                <template v-if="item.type == 'header'">
                                    <h4 class="contact-title">{{item.remark}}</h4>
                                </template>
                                <template v-else>
                                    <div class="contact-item" @click="handleSelect(item)">
                                        <div class="opt">
                                            <icon :type="isCheck(item.id) ? 'checkbox-active' : 'checkbox'" :color="isCheck(item.id) ? '#4288ff' : '#e7e6e6'" :size="20"></icon>
                                        </div>
                                        <div class="avatar">
                                            <img class="img" :src="item.avatar" v-if="item.avatar != ''">
                                            <img class="img" src="../../assets/person_icon.jpg" v-else-if="item.type == 'friend'">
                                            <img class="img" src="../../assets/group_icon.png" v-else>
                                        </div>
                                        <div class="info">
                                            <h4 v-if="item.remark" class="nickname" v-html="getEmojiImg(item.remark)"></h4>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="contact-box" v-else>
                            <div v-for="(item, index) in searchList" :key="index">
                                <div class="contact-item" @click="handleSelect(item)">
                                    <div class="opt">
                                        <icon :type="isCheck(item.id) ? 'checkbox-active' : 'checkbox'" :color="isCheck(item.id) ? '#4288ff' : '#e7e6e6'" :size="20"></icon>
                                    </div>
                                    <div class="avatar">
                                        <img class="img" :src="item.avatar" v-if="item.avatar != ''">
                                        <img class="img" src="../../assets/person_icon.jpg" v-else-if="item.type == 'friend'">
                                        <img class="img" src="../../assets/group_icon.png" v-else>
                                    </div>
                                    <div class="info">
                                        <h4 class="nickname" v-html="item.remark"></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="rb-ft">
                <a style="cursor: pointer;" class="button" :class="selectList.length > 0 ? 'primary' : 'disable'" @click="handleConfirm">确定<span v-if="selectList.length > 0">({{selectList.length}})</span></a>
            </div>
            <div class="close" @click="handleClose"><icon type="close" color="#000" :size="22"></icon></div>
        </div>
    </div>
</template>
<script>
import icon from '@/components/icon/index'
import utils from '@/utils/common'
import emoji from '@/utils/emoji'
import { baseApi } from '@/api'


export default {
    data() {
        return {
            selectList: [],
            datalist: [],
            search: '',
            loading: false,
            id: this.$store.state.base.userInfo.id
        }
    },
    props: {
        atUserList: {
          type: Array,
          default: function () {
              return []
          }
        },
        visible: {
            type: Boolean,
            default: false
        },
        isManager: {
            type: Boolean,
            default: false
        },
        msg: {
            type: Object,
            default: null
        }
    },
    computed: {
        contactList() {
            let list = []
            if (this.isManager) {
                list.push({
                    id: -1,
                    avatar: '',
                    name: '所有人',
                    remark: '所有人',
                    sendType: 'friend'
                })
            }
            let groupList = this.datalist
            if (groupList) {
                for (let key in groupList) {
                    if (!(groupList[key] && groupList[key].length == 1 && groupList[key][0].id == this.id)) {
                        list.push({
                            type: 'header',
                            remark: key.toUpperCase()
                        })
                        groupList[key].forEach(el => {
                            if (this.id != el.id) {
                                let friends = this.$store.state.base.friendList
                                // 获取好友备注名称
                                let remark = ''
                                for (let fkey in friends) {
                                    let fris = friends[fkey]
                                    let filterObj = fris.filter(fel => { return fel.id == el.id })
                                    if (filterObj.length > 0 && filterObj[0].remark) {
                                        remark = filterObj[0].remark
                                    }
                                }
                                // 没有好友备注则继续获取群备注名称,没有群备注则取默认名称
                                if (!remark) {
                                    if (el.remark) {
                                        remark = el.remark
                                    } else {
                                        remark = el.nickname
                                    }
                                }
                                list.push({
                                    type: 'friend',
                                    id: el.id,
                                    avatar: el.usericon,
                                    name: el.nickname,
                                    remark: remark,
                                    sendType: 'friend'
                                })
                            }
                        })
                    }
                }
            }
            // console.warn(list)
            return list
        },
        searchList() {
            let list = []
            let key = this.search.trim()
            list = this.contactList.filter(el => { return el.remark.indexOf(key) != -1 && el.type != 'header' })
            return list
        }
    },
    components: {
        icon
    },
    mounted() {
        this.getSubOrder()
    },
    methods: {
        getSubOrder() {
            baseApi.getSubOrder({ group_id: this.$store.state.chat.currentChatId }).then(res => {
                if (res.code == 200) {
                    if (res.data && res.data['#']) {
                        var obj = res.data['#']
                        delete res.data['#']
                        res.data['#'] = obj
                    }
                    this.datalist = res.data
                    this.selectList = JSON.parse(JSON.stringify(this.atUserList))
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        isCheck(id) {
            let status = false
            let length = this.selectList.filter(el => { return el.id == id }).length
            if (length > 0) {
                status = true
            } else {
                status = false
            }
            return status
        },
        handleSelect(res) {
            let index = utils.chartListFilter(res.id, this.selectList)
            if (index == -1) {
                this.selectList.push(res)
            } else {
                this.selectList.splice(index, 1)
            }
        },
        handleDel(index) {
            this.selectList.splice(index, 1)
        },
        handleConfirm() {
            this.$emit('selectList', this.selectList)
            this.handleClose()
        },
        handleClose() {
            this.search = ''
            this.selectList = []
            this.$emit('close')
        },
        sendMessage(id, msgType) {
            let params = {
                msgType: msgType,
                token: '',
                id: id.toString(),
                data: {
                    stage: 1,
                    msg: this.msg.msg,
                    contentType: this.msg.contentType,
                    msgId: utils.getTimestamp()
                }
            }
            this.$socket.send(params)
        },
        getEmojiImg(str) {
            return emoji.transToEmojiImg(str)
        }
    },
    updated() {
        if (this.$refs['replayBar']) {
            this.$refs['replayBar'].update()
        }
    }
}
</script>

<style lang="less" scoped>
.replay-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    .replay-box-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.4);
        -webkit-backface-visibility: hidden;
        animation: b .1s;
    }
    .replay-box-content {
        position: relative;
        background: #fff;
        color: #444;
        margin: 0 auto;
        max-width: 100%;
        padding: 0;
        border-radius: 4px;
        overflow: hidden;
        width: 480px;
        height: 600px;
        .rb-hd {
            .title {
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                margin-bottom: 0;
                line-height: 50px;
                background-color: #f9f9f9;
            }
        }
        .rb-bd {
            .selector {
                max-height: 110px;
                overflow-y: auto;
                position: absolute;
                min-height: 60px;
                left: 0;
                right: 0;
                z-index: 999;
                background-color: #fff;
                padding: 10px 0 0 20px;
                .contactor {
                    float: left;
                    position: relative;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    .avatar {
                        .img {
                            display: block;
                            width: 40px;
                            height: 40px;
                        }
                    }
                    .opt {
                        display: none;
                        position: absolute;
                        cursor: pointer;
                        top: -12px;
                        right: -8px;
                        .delete {
                            display: inline-block;
                            vertical-align: middle;
                            width: 19px;
                            height: 19px;
                            background: url('../../assets/del_icon.png') no-repeat;
                            background-size: cover;
                        }
                    }
                    &:hover {
                        .opt {
                            display: block;
                        }
                    }
                }
                .input-box {
                    margin-bottom: 10px;
                    position: relative;
                    float: left;
                    .s-icon {
                        margin: 6px;
                    }
                    .input {
                        border: 0;
                        font-size: 16px;
                        width: 5em;
                        line-height: 40px;
                        height: 40px;
                    }
                }
                &:after {
                    content: " ";
                    visibility: hidden;
                    display: block;
                    height: 0;
                    clear: both;
                }
            }
            .chooser {
                margin: 0 20px;
                padding-top: 60px;
                height: 460px;
                &.choose2 {
                    padding-top: 120px;
                    overflow: auto;
                }
                .contact-box {
                    .contact-title {
                        background: #f8f8f8;
                        font-weight: 400;
                        font-size: 13px;
                        padding: 0 18px;
                        line-height: 25px;
                    }
                    .contact-item {
                        overflow: hidden;
                        padding: 7px 20px;
                        cursor: pointer;
                        border-bottom: 1px solid #f2f2f2;
                        .opt {
                            float: left;
                            margin-right: 10px;
                            line-height: 40px;
                        }
                        .avatar {
                            float: left;
                            margin-right: 10px;
                            .img {
                                display: block;
                                width: 40px;
                                height: 40px;
                                border-radius: 2px;
                            }
                        }
                        .info {
                            overflow: hidden;
                            .nickname {
                                font-weight: 400;
                                font-size: 13px;
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                            }
                        }
                    }
                }
            }
        }
        .rb-ft {
            padding-top: 20px;
            text-align: center;
            .button {
                display: inline-block;
                font-size: 14px;
                width: 190px;
                text-align: center;
                color: #fff;
                text-decoration: none;
                border-radius: 4px;
                &.primary {
                    background-color: #4288ff;
                    line-height: 42px;
                }
                &.disable {
                    border: 1px solid #c1c1c1;
                    background-color: #c9c9c9;
                    line-height: 40px;
                }
            }
        }
        .close {
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 14px;
            right: 14px;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            display: inline-block;
        }
    }
    * {
        box-sizing: border-box;
    }
    @keyframes b {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }
}
</style>
